<template>
  <view class="bookdetails">
    <u-sticky bgColor="#fff">
      <u-tabs
        lineHeight="0"
        itemStyle="width: calc((100% - 50px) / 2);height: 40px"
        :list="tabList"
        activeStyle="color:#409EFF;border-bottom:2px solid #409EFF;height:38px;line-height:38px;font-size:16px"
        inactiveStyle="color:#999999;border-bottom:2px solid #fff;height:38px;line-height:38px;font-size:16px"
        @click="Tabclick"
        keyName="name"
      ></u-tabs>
    </u-sticky>
    <view class="qu-box">
      <view class="book-detail" v-if="tabKey == '详情'">
        <view class="box">
          <view class="jc-xx flex-center">
            <text class="name">
              {{ bookDeta.Name }}
            </text>
            <text class="Tel">
              {{ bookDeta.Tel }}
            </text>
            <text class="TheClass">
              {{ bookDeta.TheClass }}
            </text>
            <text class="CheckIn" v-if="bookDeta.State == 'CheckIn'">
              已入住
            </text>
            <text class="Wait" v-if="bookDeta.State == 'Wait'">未入住</text>
            <text class="Cancel" v-if="bookDeta.State == 'Cancel'">已取消</text>
            <text class="NoShow" v-if="bookDeta.State == 'NoShow'">已过期</text>
          </view>
          <view class="time">
            {{ bookDeta.StartEnd + ',' + '共' + bookDeta.Days + '晚' }}
          </view>
        </view>
        <view
          class="box"
          v-for="(item, index) in bookroomList"
          :key="item.RoomClassId"
        >
          <view class="title-room">
            房型：{{ item.RoomClassName + ' ' + item.Num + '间' }}
          </view>
          <view class="RoomClass align-center justify-between">
            <view class="">
              {{ item.AssignRoomsTwo || '未排房' }}
            </view>
            <view
              v-if="bookDeta.State == 'Wait'"
              class="pai"
              @click="AssignRoomsClick(item, index)"
            >
              排房 >
            </view>
          </view>
          <view class="roomNum align-center justify-between">
            <view>
              已排：{{ item.AssignRooms.length + item.CheckInRooms.length }}
            </view>
            <view>
              未排：{{
                item.Num - item.AssignRooms.length - item.CheckInRooms.length
              }}
            </view>
            <view>已住：{{ item.CheckInRooms.length }}</view>
          </view>
        </view>
        <view class="box">
          <view class="room-price align-center justify-between">
            <view class="price">
              房价总额
              <text style="margin-left: 20rpx; color: red">
                ¥{{ bookDeta.PriceTotal * bookDeta.Days }}
              </text>
            </view>
            <view class="num">
              共{{ bookDeta.roomNum }}间{{ bookDeta.Days }}晚
            </view>
          </view>
          <view class="room-price align-center justify-between">
            <view class="price">
              已收订金
              <text style="margin-left: 20rpx; color: #409eff">
                ¥{{ bookDeta.deposit }}
              </text>
            </view>
            <view
              v-if="bookDeta.State == 'Wait'"
              class="add-deposit align-center"
              @click="Adddeposit"
            >
              <u-icon name="plus-circle" color="#2891FA"></u-icon>
              <text style="margin-left: 20rpx">新增订金</text>
            </view>
          </view>
          <view
            class="Money-li align-center justify-between"
            v-for="item in MoneyList"
            :key="item.Id"
          >
            <view class="money-xx">
              {{
                item.DateManDate + '/' + item.PayClassName + '/¥' + item.Money
              }}
            </view>
            <view class="money-btn">
              <u-icon name="more-dot-fill"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="book-log" v-if="tabKey == '日志'">
        <u-list
          @scrolltolower="scrolltolower"
          :showScrollbar="true"
          lowerThreshold="100"
        >
          <view class="u-page">
            <u-list-item v-for="(item, index) in logList" :key="index">
              <view class="log-item">
                <view class="time">
                  {{ item.CreationDate }}
                </view>
                <view class="nr">
                  {{ item.OperationContent }}
                </view>
                <view class="User">操作员：{{ item.User }}</view>
              </view>
            </u-list-item>
            <u-loadmore
              fontSize="34rpx"
              iconSize="34rpx"
              :status="loadMoreStatus"
            />
          </view>
        </u-list>
      </view>
    </view>
    <view
      class="btn-bottom align-center justify-between"
      v-if="bookDeta.State == 'Wait'"
    >
      <u-button
        class="width-btn"
        type="error"
        :plain="true"
        text="取消订单"
        @click="voidOrder(bookDeta)"
      ></u-button>
      <u-button class="width-btn" type="primary" text="去入住"></u-button>
    </view>
    <terraces v-model:data="terracesData" :dataclick="updateroom" />
  </view>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import terraces from '../com/terraces.vue'
import { BookDetailExV1, ModifyV2 } from '@/api/server/v2/book'
import {
  BookOpLogs,
  book_log,
  Order_Book_ID,
  GetBookedNumV1,
  BookMoneyList,
  CancelBook,
  GetHomeClassList,
  book_Room,
  GetRoomsForAssign
} from '@/api/server/v1/book'
import toast from '@/utils/toast'

let bookDeta = ref<any>(Object)
let ids = ref<string>('')
let tabKey = ref<string>('详情')
const tabList = ref([
  {
    name: '详情'
  },
  {
    name: '日志'
  }
])
let data: Order_Book_ID = reactive({
  id: ''
})
//预订订单详情
const bookDetail = function () {
  const id = ids.value
  BookDetailExV1({
    ...data,
    id
  }).then((res) => {
    console.log(res)
    bookDeta.value = res.Book
    bookDeta.value.StartEnd =
      bookDeta.value.CheckIn.split(' ')[0] +
      '—' +
      bookDeta.value.CheckOut.split(' ')[0]
    bookDeta.value.PriceTotal = 0
    bookDeta.value.roomNum = 0
    bookDeta.value.deposit = 0
    bookroom()
    bookmoney()
  })
}
let MoneyList = ref<any>([])
//预订订单--订金明细
const bookmoney = function () {
  const id = ids.value
  BookMoneyList({
    ...data,
    id
  }).then((res) => {
    MoneyList.value = res
    MoneyList.value.forEach((ele) => {
      bookDeta.value.deposit += ele.Money
    })
    console.log(MoneyList.value)
  })
}
let bookroomList = ref<any>([])
//预订订单--房间详情
const bookroom = function () {
  const id = ids.value
  GetBookedNumV1({
    ...data,
    id
  }).then((res) => {
    bookroomList.value = res
    bookroomList.value.forEach((eld) => {
      classList.value.forEach((ele) => {
        if (ele.Id == eld.RoomClassId) {
          eld.RoomClassName = ele.Name
          eld.AssignRoomsTwo =
            eld.AssignRooms.toString() + eld.CheckInRooms.toString()
        }
      })
      bookDeta.value.PriceTotal += eld.Price * eld.Num
      bookDeta.value.roomNum += eld.Num
    })
  })
}
let classList = ref<Array<{ Id: string; Name: string }>>([])
//全部房型
const homelist = function () {
  GetHomeClassList().then((res) => {
    console.log(res)
    classList.value = res
  })
}
let Pages: number = 1
let logList = ref<Array<any>>([])
let loglim: book_log = reactive({
  page: Pages,
  limit: 10,
  ReceiveId: ids.value
})
//loading加载中  nomore停止加载  loadmore到底加载
let loadMoreStatus = ref<string>('loadmore')
const logbook = function () {
  const page = Pages
  const ReceiveId = ids.value
  BookOpLogs({
    ...loglim,
    page,
    ReceiveId
  }).then((res) => {
    if (res.Items.length > 0) {
      if (res.Items.length < 10) {
        res.Items.forEach((ele) => {
          logList.value.push(ele)
        })
        loadMoreStatus.value = 'nomore'
      } else {
        res.Items.forEach((ele) => {
          logList.value.push(ele)
        })
      }
    } else {
      loadMoreStatus.value = 'nomore'
    }
  })
}
const Tabclick = function (item) {
  console.log(item.name)
  tabKey.value = item.name
  if (item.name == '详情') {
    bookDetail()
  }
  if (item.name == '日志') {
    Pages = 1
    logList.value = []
    logbook()
  }
}
let terracesShow = ref(false)
let terracesData = ref()
let roomdata: book_Room = reactive({
  HomeClassId: '',
  CheckIn: '',
  CheckOut: '',
  BookId: ''
})
//排房
const AssignRoomsClick = function (item, index) {
  console.log(item)
  if (item.Num - item.AssignRooms.length - item.CheckInRooms.length == 0) {
    toast.$toast('所有房间已排')
  } else {
    const HomeClassId = item.RoomClassId
    const CheckIn = bookDeta.value.CheckIn
    const CheckOut = bookDeta.value.CheckOut
    const BookId = ids.value
    GetRoomsForAssign({
      ...roomdata,
      HomeClassId,
      CheckIn,
      CheckOut,
      BookId
    }).then((res) => {
      console.log(res)
      if (res.FreeRooms.length > 0) {
        terracesShow.value = true
        let ass = ref<Array>([])
        res.UsedRooms.forEach((ele) => {
          ass.value.push(ele.RoomNo)
        })
        terracesData.value = {
          name: '排房',
          show: terracesShow.value,
          roomList: res.FreeRooms,
          RoomClassName: item.RoomClassName,
          RoomClassId: item.RoomClassId,
          AssignRooms: ass.value.length > 0 ? ass.value : item.AssignRooms,
          Num: item.Num || 0,
          index: index
        }
      } else {
        toast.$toast('当前房型没有房间可预定')
      }
    })
  }
}
//排房更新 ModifyV2
const updateroom = function (params) {
  console.log(params.AssignRooms)
  console.log(bookDeta.value)
  bookroomList.value.forEach((ele) => {
    if (ele.RoomClassId == params.RoomClassId) {
      ele.AssignRooms = params.AssignRooms
    }
  })
  console.log(bookroomList.value)
  const data = {
    BookNum: bookroomList.value,
    BookType: bookDeta.value.BookType,
    CheckIn: bookDeta.value.CheckIn,
    CheckOut: bookDeta.value.CheckOut,
    ContractNo: bookDeta.value.ContractNo,
    Days: bookDeta.value.Days,
    Dinner: bookDeta.value.Dinner,
    Id: bookDeta.value.Id,
    Lunch: bookDeta.value.Lunch,
    Name: bookDeta.value.Name,
    Note: bookDeta.value.Note,
    PaymentPrice: bookDeta.value.PaymentPrice,
    ReceiveClass: bookDeta.value.ReceiveClass,
    ReceiveInClass: bookDeta.value.ReceiveInClass,
    TeamName: bookDeta.value.TeamName,
    Tel: bookDeta.value.Tel,
    TheClass: bookDeta.value.TheClass,
    TheCompany: bookDeta.value.TheCompany,
    TheCompanyId: bookDeta.value.TheCompanyId,
    ThirdNo: bookDeta.value.ThirdNo,
    VipId: bookDeta.value.VipId,
    VipLev: bookDeta.value.VipLev,
    VipNo: bookDeta.value.VipNo,
    XsName: bookDeta.value.XsName,
    Zk: bookDeta.value.Zk
  }
  ModifyV2(data).then((res) => {
    console.log(res)
    toast.$toast('排房修改成功')
    bookDetail()
  })
}
//到底执行
const scrolltolower = () => {
  if (loadMoreStatus.value === 'nomore') {
  } else {
    Pages++
    logbook()
  }
}
//取消预订订单
const voidOrder = (order) => {
  console.log(order.Id, '取消')
  const id = order.Id
  BookMoneyList({
    ...data,
    id
  }).then((res) => {
    console.log(res)
    if (res.length > 0) {
      toast.$toast('当前预订有未退订金记录，请先处理后再结束')
    } else {
      uni.showModal({
        title: '提示',
        content: '确认取消该预订单吗？',
        success: function (res) {
          if (res.confirm) {
            // 执行确认后的操作
            CancelBook({
              ...data,
              id
            }).then((res) => {
              toast.$toast('取消成功')
              bookDetail()
            })
          } else {
            // 执行取消后的操作
          }
        }
      })
    }
  })
}
//新增订金
const Adddeposit = function () {
  console.log('新增订金')
}
onLoad((option) => {
  console.log(option.id)
  ids.value = option.id
  bookDetail()
  homelist()
})
</script>

<style lang="scss" scoped>
.bookdetails {
  height: calc(100vh - 88rpx);

  .qu-box {
    height: calc(100% - 80rpx);
    overflow: hidden;

    .book-detail {
      background-color: #f2f3f6;
      padding: 0 24rpx;
      height: 100%;
      overflow-y: auto;

      .box {
        margin: 24rpx 0 0 0;
        background-color: #fff;
        border-radius: 8rpx;
        padding: 0 32rpx;
      }

      .title-room {
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        border-bottom: 1px solid #e8e8e8;
        height: 90rpx;
        line-height: 90rpx;
      }

      .room-price {
        height: 55px;
        border-bottom: 1px solid #e8e8e8;

        .price {
          font-size: 32rpx;
          font-weight: normal;
          color: #333333;
        }

        .num {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
        }

        .add-deposit {
          font-size: 28rpx;
          font-weight: 400;
          color: #2891fa;
        }
      }

      .Money-li {
        height: 90rpx;

        .money-xx {
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }

        .money-btn {
          transform: rotate(90deg);
        }
      }

      .jc-xx {
        justify-content: flex-start;
        height: 80rpx;

        .name {
          font-size: 36rpx;
          font-weight: 500;
          color: #333333;
        }

        .Tel {
          font-size: 32rpx;
          font-weight: 500;
          color: #409eff;
          margin: 0 16rpx;
        }

        .TheClass {
          background: #faefe6;
          border-radius: 2px 2px 2px 2px;
          color: #f27e35;
          font-size: 24rpx;
          font-weight: 400;
          padding: 4rpx 12rpx;
          margin-right: 16rpx;
        }

        .CheckIn {
          background-color: #409eff;
          color: #fff;
          font-size: 24rpx;
          font-weight: 400;
          padding: 4rpx 12rpx;
        }

        .Wait {
          background-color: #47cc2a;
          color: #fff;
          font-size: 24rpx;
          font-weight: 400;
          padding: 4rpx 12rpx;
        }

        .Cancel {
          background-color: #999999;
          color: #fff;
          font-size: 24rpx;
          font-weight: 400;
          padding: 4rpx 12rpx;
        }

        .NoShow {
          background-color: #ff6c66;
          color: #fff;
          font-size: 24rpx;
          font-weight: 400;
          padding: 4rpx 12rpx;
        }
      }

      .time {
        height: 80rpx;
      }

      .RoomClass {
        font-size: 32rpx;
        font-weight: 400;
        color: #333333;
        height: 80rpx;
        line-height: 80rpx;
        border-bottom: 1px solid #e8e8e8;
      }

      .roomNum {
        height: 60rpx;
        line-height: 60rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #72767a;
      }

      .pai {
        font-size: 24rpx;
        font-weight: normal;
        color: #409eff;
      }
    }

    .book-log {
      .u-page {
        background-color: #f2f3f6;
        padding: 0 24rpx;
        height: 100%;
        overflow-y: auto;
        padding-bottom: 50px;

        .log-item {
          margin: 24rpx 0 0 0;
          background-color: #fff;
          border-radius: 8rpx;

          .time {
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
            height: 80rpx;
            line-height: 80rpx;
            border-bottom: 1px solid #e8e8e8;
            padding: 0 32rpx;
          }

          .nr {
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
            padding: 32rpx;
          }

          .User {
            font-size: 28rpx;
            font-weight: 400;
            color: #b4b6b8;
            height: 80rpx;
            line-height: 80rpx;
            border-top: 1px solid #e8e8e8;
            padding: 0 32rpx;
          }
        }
      }
    }
  }
  .btn-bottom {
    background-color: #fff;
    width: calc(100% - 40rpx);
    padding: 10rpx 20rpx;
    position: fixed;
    bottom: 0;
    z-index: 1008;
    .width-btn {
      width: 30%;
      margin: 0;
    }
  }
}
</style>
